<template>
  <!--历史验证-->
  <div class="historyaward">
     <el-row class="plan_contentflex flex broder_b">
        <div class="flex-pack-justify flex-pack-center flex-align-center t_center p_tb12 whith_208">
          <div class="font_14 color_99">数据管理</div>
          <div class="font_12 color_ff m_top5">
            <span class ="plan_groupnumber bg_colorE5">开奖数据</span>
          </div>
        </div>
        <div class="flex-1 flex-pack-justify flex-pack-center border_l font_14 color_dd p_left68">
          <div class="w_200 t_center">
            <div class="font_14 color_99">数据处理</div>
              <div class="font_12 color_33 m_top5">
                <span class="plan_groupnumber">
                    <el-checkbox v-model="checked" @change="requireList">自动更新数据</el-checkbox></span>
                    <span class="plan_groupnumber m_left15 p_l20" @click="onexportFn">
                    <img class="hisimg" src="@/assets/img/plan/history.png" >导出数据</span>
              </div>
          </div>
         
        </div>
      </el-row>
      <el-row>
           <div class="p12 broder_b plan-box">
             <select class="select_box" v-model="limit">
              <option value="30">近30期</option>
              <option value="50">近50期</option>
              <option value="100">近100期</option>
             </select>
            <el-table :stripe="true" ref="multipleTable" height="500" :data="recordlist" tooltip-effect="dark" style="width: 100%;border:1px solid #dddddd">
                <el-table-column align="center" prop="expect" label="开奖期数">
                </el-table-column>
                <el-table-column align="center" prop="open_code" label="开奖数据"></el-table-column>
                <el-table-column align="center" prop="create_time"  label="开奖时间" show-overflow-tooltip></el-table-column>
            </el-table>
            </div> 
      </el-row>
  </div>

</template>

<script>
    import CascadeSelection from "../CascadeSelection";
    import Date from '@/assets/js/planjson';
    import Vue from 'vue'

      Vue.directive('tabelLoadmore', {
          bind(el, binding) {
            // 获取element-ui定义好的scroll盒子
            
            const sheight = el.querySelector('.el-table__body-wrapper');
            
            sheight.addEventListener('scroll', function() {
                  let sign = 500; // 定义默认的向上滚于乡下滚的边界
                  const CONDITION = ((this.scrollHeight - this.scrollTop === this.clientHeight) &&  this.scrollTop > sign)// 注意: && this.scrollTop 
                  
                  if(this.scrollTop > sign) {
                      sign = this.scrollTop;
                  }
                  if(this.scrollTop < sign) {
                      sign = this.scrollTop;
                  } 
                  if(CONDITION) {
                      binding.value();
                  }
            });
          }
      })

        

    export default {
      data () {
        return {
          limit: 30,
          checked: false,
          options: [
            {
                "value": "0",
                "label": "近30期"
            },
            {
                "value": "1",
                "label": "近50期"
            },
            {
                "value": "2",
                "label": "近100期"
            }
          ],
          recordinfo: {},
          recordlist: [],
          loadSign: false,
          page: 1
        }
    },
    components: {
      CascadeSelection
    },
    watch: {
      lotteryid(){
        this.page = 1
        this.recordlist = []
        this.getrecordlist(this.limit, this.page)
      },
      limit(){
        this.page = 1
        this.recordlist = []
        this.getrecordlist(this.limit, this.page)
      },
      page(){
        if(this.page == 1){
            this.scrollHeight = 0
            this.scrollTop = 0
        }
      }
    },

    computed: {
      lotteryid(){
        return this.$store.state.lottery_id
      }
    },

    
    mounted () {
         this.getrecordlist(this.limit, this.page)     
    },
      methods: {
        getrecordlist(limit, page){  //获取数据列表
          this.https('index/getObtainRecordList',{lottery_id: this.$store.state.lottery_id, limit: limit, page: page}).then(data => {
            this.recordinfo = data
            this.recordlist = data.data
          })
        },
        
        requireList(){ //自动跟新数据
              var timer = setInterval(()=>{
                if(!this.checked){
                   clearInterval(timer)
                   return
                }
                this.limit = 30
                this.page = 1
                this.getrecordlist(this.limit, this.page)  
              },5000)
        },

         tableLoadMore () { //下滑加载更多
              this.page++
              if (this.page > this.recordinfo.last_page) {
                return
              }
              this.https('index/getObtainRecordList',{lottery_id: this.$store.state.lottery_id, limit: this.limit, page: this.page}).then(data => {
               data.data.forEach(list => {
                   this.recordlist.push(list)
                });
              })
        },
        onexportFn(){ //导出数据
          window.location.href = 'http://47.75.205.251:11111/client/index/getObtainRecordListExcel?lottery_id='+this.$store.state.lottery_id+'&limit='+this.limit+'&p='+ this.page + '&token='+sessionStorage.token +'&uid='+sessionStorage.uid
        }
      },
    }
</script>

<style>
  .historyaward .el-table th:nth-of-type(1)>.cell:nth-of-type(1){
    text-align: left;
    padding-left: 0.8rem;
  }
  .historyaward .el-table td{
    padding: 0;
    font-size: 0.12rem !important;
    color: #333333;
  }
  .historyaward .el-table th{
    color: #000000;
    background: #F5F5F5;
  }
  .historyaward .select_box{
    background: none !important;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #E52A20;
    border-color: #E52A20;
}
.el-checkbox__inner:hover{
    border-color: #E52A20;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #E52A20 !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
    color:#333333;
    font-weight: bold !important;
}
.el-checkbox__label{
    font-size:0.12rem;
    color:#333333;
}
.cell{
  font-size: 0.13rem !important;
  font-weight: bold;
}
</style>
<style lang="less" scoped>
  @import url(../../assets/css/historyaward.less);
  @import url(../../assets/css/plan/planpublic.less);
</style>
